import React from "react";
import {
  View,
  Text,
  Image,
  TouchableHighlight,
  StyleSheet,
} from "react-native";
import { useTheme } from "@/contexts/ThemeContext";
import { FriendRequest } from "@/types/friend-request";
import RequestStatusComponent from "../RequestStatus";

interface RequestItemProps {
  item: FriendRequest;
  onAccept: (id: string) => void;
  onReject: (id: string) => void;
  onPress: (item: FriendRequest) => void;
}

const RequestItem: React.FC<RequestItemProps> = ({
  item,
  onAccept,
  onReject,
  onPress,
}) => {
  const { colors } = useTheme();

  return (
    <TouchableHighlight
      onPress={() => onPress(item)}
      underlayColor={colors.backgroundHighlight}
    >
      <View
        style={[
          styles.requestItem,
          { borderBottomColor: colors.border.divider },
        ]}
      >
        <Image
          source={{ uri: item.avatar }}
          style={styles.avatar}
          resizeMode="cover"
        />
        <View style={styles.infoContainer}>
          <Text style={[styles.nameText, { color: colors.text.primary }]}>
            {item.nickname}
          </Text>
          <Text style={[styles.messageText, { color: colors.text.secondary }]}>
            {item.message}
          </Text>
          <Text style={[styles.timestampText, { color: colors.text.hint }]}>
            {item.createTime}
          </Text>
        </View>
        <RequestStatusComponent
          status={item.status}
          onAccept={() => onAccept(item.id)}
          onReject={() => onReject(item.id)}
        />
      </View>
    </TouchableHighlight>
  );
};

const styles = StyleSheet.create({
  requestItem: {
    flexDirection: "row",
    alignItems: "center",
    paddingVertical: 12,
    paddingHorizontal: 16,
    borderBottomWidth: StyleSheet.hairlineWidth,
  },
  avatar: {
    width: 50,
    height: 50,
    borderRadius: 25,
    marginRight: 12,
  },
  infoContainer: {
    flex: 1,
    justifyContent: "center",
  },
  nameText: {
    fontSize: 16,
    fontWeight: "500",
  },
  messageText: {
    fontSize: 14,
    marginTop: 2,
  },
  timestampText: {
    fontSize: 12,
    marginTop: 4,
  },
});

export default RequestItem;
 